 <template>
  <el-container>
    <el-main>
        <el-row class="table-wrapper">   
            <el-col :span='24'>  

            <el-form :inline="true" ref="form" :model="form" label-width="80px">
                
                <el-form-item label="分站">
                    <el-input v-model="form.namespace" clearable></el-input>
                </el-form-item>
                <el-form-item label="用户ID">
                    <el-input v-model="form.userId" clearable></el-input>
                </el-form-item>
                <el-form-item label="用户角色">
                    <el-select v-model="form.role">
                        <el-option
                                v-for="item in roles"
                                :key="item"
                                :label="item"
                                :value="item">
                                </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                </el-form-item>
            
            </el-form>
        </el-col>
      </el-row>
     
    <div class="table_container">
          <el-table
              :data="userRoles"
              v-loading="tableLoading"
              highlight-current-row
              style="width: 100%">
             
              <el-table-column
                property="id"
                label="序号"
                width="130">
              </el-table-column>
              <el-table-column
                property="namespace"
                label="分站">
              </el-table-column>
              <el-table-column
                property="userId"
                label="用户ID">
              </el-table-column>
              <el-table-column
                property="userName"
                label="用户名">
              </el-table-column>
              <el-table-column
                property="role"
                label="用户角色">
              </el-table-column>
              <el-table-column
                  label="状态"
                  width="130">
                  <template slot-scope="scope">
                    <el-button type="primary" @click="updateStatus(scope.row)" v-if='scope.row.status !== "ENABLE"'>生效</el-button>
                    <el-button type="primary" @click="updateStatus(scope.row)" v-if='scope.row.status === "ENABLE"'>失效</el-button>
                  </template>
              </el-table-column>
             
          </el-table>
          <div class="Pagination" style="text-align: left;margin-top: 10px;">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 80, 100]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
          </div>
      </div>
      </el-main>
  </el-container>
</template>

<script>
    import {allRoles, updateRole, setRole} from '@/api/role'
    import {SUPER_ADMIN, STATION_ADMIN, PRINTER, USER} from '@/utils/cookie'
    export default {
      data () {
        return {
          form: {
            namespace: '',
            userId: '',
            row: 'USER'
          },
          roles: [SUPER_ADMIN, STATION_ADMIN, PRINTER, USER],
          currentPage: 1,
          limit: 20,
          total: 0,
          tableLoading: false,
          userRoles: []
        }
      },
      mounted () {
        this.initData()
      },
      methods: {
        async initData () {
          this.allRoles()
        },
        async allRoles () {
          this.tableLoading = true
          try {
            let result = await allRoles(true)

            if (result.status === 200 && result.data.code === 200) {
              this.userRoles = result.data.data
              this.total = result.data.page.total
            } else {
              throw new Error('获取数据失败')
            }
          } catch (err) {
            // this.$message.error('获取数据失败')
            console.log('获取数据失败', err)
          }
          this.tableLoading = false
        },

        async createRole () {
          let loading = this.$loading({
            lock: true,
            text: '正在加载',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          try {
            let result = await setRole(this.form)
            if (result.status === 200 && result.data.code === 200) {
              this.allRoles()
            } else {
              throw new Error('创建角色失败')
            }
          } catch (err) {
            console.log('创建角色失败', err)
          } finally {
            loading.close()
          }
        },
        onSubmit () {
          this.createRole()
        },
        async updateRole (role) {
          let loading = this.$loading({
            lock: true,
            text: '正在加载',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          try {
            let result = await updateRole({
              id: role.id,
              status: role.status === 'ENABLE' ? 'CANCELED' : 'ENABLE'
            })
            if (result.status === 200 && result.data.code === 200) {
              this.allRoles()
            } else {
              throw new Error('修改状态失败')
            }
          } catch (err) {
            console.log('修改状态失败', err)
          } finally {
            loading.close()
          }
        },
        updateStatus (role) {
          this.updateRole(role)
        },
        handleSizeChange (size) {
          this.limit = size
          this.allRoles()
        },
        handleCurrentChange (page) {
          this.currentPage = page
          this.allRoles()
        }

      }
    }
</script>

<style lang="less" scoped>
    @import '../../style/mixin';
    .label-title{
        font-weight: bold;
        font-size: 24px;
        color: #ff633b;
        margin: 30px;
    }
    .manage_tip {
      margin-bottom: 10px;
    }
    .introduct{
        width: 900px;
        text-align: center;
        margin: auto;
    }
    .tip {
        font-size: 12px;
    }
    .tip strong {
        color: red;
        font-weight: bold;
    }

    .table-wrapper {
        border: 1px solid #ebeef5;
        margin: 30px 0;
        padding-top: 20px;
        padding-left: 10px;
    }
    // .el-button {
    //   width: 200px;
    //   margin: auto;
    //   display: block;
    // }
    .el-table .info-row {
        background: #c9e5f5;
    }

    .el-table .positive-row {
        background: #e2f0e4;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .batch-dialog{
    }
    .batch-table{
        max-height: 400px;
        overflow: auto;
    }
</style>

 